<template>
	<view>
		<uni-nav-bar statusBar="true" :fixed="true" :border="false" backgroundColor="#eff3f7">
			<view class="index-top-nav-title">
				<!-- {{i18n.index}} -->
				<view class="index-top-nav">
					<text :class="{'active':selectID==1}" @tap.stop="selectType('1')">{{i18n.RegularInvestment}}</text>
					<text :class="{'active':selectID==2}" @tap.stop="selectType('2')">{{i18n.CurrentInvestment}}</text>
				</view>
				<text @tap.stop="jumpList">{{i18n.FixedInvestmentRecord}}</text>
			</view>
		</uni-nav-bar>

		<view class="content">
			<view class="pool-title">
				{{i18n.SelectMiningPoolLevel}}
			</view>
			<view class="selected-list">
				<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="scroll-view-item_H" >
							<view class="fund-cur-item-title">{{selectObj.title}}</view>
							<view class="fund-cur-item-content">
								<!-- <view class="item-l">
									<view>{{(simp.hq_sl)+'%'}}</view>
									<text>日利率</text>
								</view> -->
								<!-- <view class="item-r">
									<view>算力:{{item.sl}}</view> 
									<view>建设基金 {{simp.fruit_need}}</view>
								</view>-->
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		<!-- 	<view class="pool-cur-title">
				{{i18n.InputCurrency}}  {{selectObj.coin}}
			</view> -->
			<view class="pool-title">
				{{i18n.EscrowFund}}
			</view>
			<view class="pool-input-item">
				<input type="number" value="" :placeholder="i18n.p_enter_number_input" maxlength="120" v-model="num"/>
			</view>
			<view class="pool-title">
				{{i18n.SelectTheOpeningPeriod}}
			</view>
			<view class="selected-term-list">
				<scroll-view class="scroll-term_H" scroll-x="true">
					<block v-for="(item,index) in list" :key="index">
						<view class="scroll-term-item_H" @tap.stop="selectTerm(index)" :class="{'active':selectTermId==index}">
							<view class="fund-term-item-title">{{item.day}}{{i18n.day}}</view>
							<text>{{i18n.InputCurrency}} {{item.coin}}</text>
							<text>{{i18n.day_rate}} {{item.sl}}</text>
							<text>{{i18n.Total}} {{item.max}}</text>
						</view>
					</block>
				</scroll-view>
			</view>
			<view class="pool-btn-item" @tap.stop="detail">
				{{selectID==1?i18n.buy:i18n.reservation}}
			</view>
			
		</view>
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import Toast from '@/components/toast/toast.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import Load from '../../components/common/load.vue';
	import {fetch, _updataTabBar, showToast, pageto, forceUpdate} from '@/common/js/util.js'
	import {mapGetters, mapMutations} from 'vuex' 
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType',
				'getLang'
			])
		},
		components:{
			uniNavBar,
			Load,
			Toast
		},
		data() {
			return {
				showLoad:false,
				selectTermId:0,
				list:[],
				selectObj:{},
				selectID:1,
				num:'',
				curInfo:''
			}
		},
		onShow(){
			this.num = '';
			this.selectID = 1;
			this.getList();
			this.getWallList();
		},
		methods:{
			...mapMutations(['setPackages']),
			selectType(e){
				this.num = '';
				this.selectID = e;
				this.getList();
			},
			jumpList(){
				uni.navigateTo({
					url:'/pages/fund/list'
				})
			},
			selectTerm(index){
				this.selectTermId = index;
				this.selectObj = this.list[index];
			},
			detail(){
				if(!this.num){
					showToast(this.i18n.p_enter_number_input)
					return
				}
				let info = this.selectObj;

				info.num = this.num;
				info.selectID = this.selectID;
				
				this.setPackages(info)
				uni.navigateTo({
					url:`/pages/fund/detail`
				})
			},
			getList(){
				let url = this.getRequestUrl + '/api/Shop/shop_list';
				let data = {
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					type:this.selectID
				}
				this.showLoad = true;
				fetch(url,data,'POST').then(res=>{
					if(res.data.code){
						this.showLoad = false;
						let tmp = res.data.data
						this.balance = res.data.data.balance
						let arr = []
						for (let key in tmp) {
							if (key != 'balance') {
								arr.push(tmp[key])
							} else {
								this.balance = tmp[key]
							}
						}
						this.list = arr;
						this.selectObj = res.data.data[0]
					}
				}).catch(error=>{
					this.showLoad = false ;
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.index-top-nav-title{
		// padding-left: 30upx;
		width: 100%;
		text-align: center;
		background: linear-gradient(to right,#32B9FF,#1D7DFF);
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 30upx;
		.index-top-nav{
			display: flex;
			justify-content: center;
			position: relative;
			&::after{
				position: absolute;
				content: '';
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 2upx;
				height: 50upx;
				background-color: #86c6ff;
			}
			text{
				width: 250upx;
				font-size: 36upx;
				font-weight: 100;
				text-align: center;
				margin-right: 0;
				display: block;
				&.active{
					color: #FFFFFF;
					font-weight:bold;
					position:relative;
					&::after{
						content: '';
						width: 100upx;
						height: 4upx;
						background-color: #FFFFFF;
						position: absolute;
						bottom: 2upx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
		text{
			font-size:28upx;
			font-weight: 100;
			margin-right: 50upx;
		}
	}
	.content{
		padding:0 30upx;
		.pool-cur-title{
			padding: 51upx 0 0;
			font-size:27upx;
			color: #2d2d2d;
			font-weight: bold;
		}
		.pool-title{
			font-size:27upx;
			color: #2d2d2d;
			padding: 51upx 0 32upx;
			font-weight: bold;
		}
		.selected-list {
			width: 100%;
			box-sizing: border-box;
			.scroll-view-item_H {
				display: inline-block;
				width: 490upx;
				font-size: 36upx;
				padding: 30upx;
				box-sizing: border-box;
				border-radius: 10upx;
				background-color: #f6f6f6;
				margin-right: 30upx;
				&.active{
					background:linear-gradient(to left,#19B6F7,#1067D1);
					.fund-cur-item-title{
						color: #FFFFFF;
					}
					.fund-cur-item-content{
						color: #FFFFFF;
					}
				}
			}
			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				box-sizing: border-box;
				.fund-cur-item-title{
					color: #1F1F1F;
					font-size: 25upx;
					margin-bottom: 34upx;
				}
				.fund-cur-item-content{
					display: flex;
					align-items: center;
					.item-l{
						color: #FC961D;
						font-size: 25upx;
						padding-right: 40upx;
						border-right: 1upx solid #c9c9c9;
						view{
							margin-top: 22upx;
							font-size:36upx;
							font-weight: bold;
						}
					}
					.item-r{
						padding-left: 32upx;
						view{
							font-size:24upx;
							margin-bottom: 22upx;
							&:last-child{
								margin-bottom: 0;
							}
						}
					}
				}
			}
		}
		.selected-term-list {
			width: 100%;
			box-sizing: border-box;
			.scroll-term-item_H {
				display: inline-block;
				width: 250upx;
				font-size: 36upx;
				padding: 30upx;
				box-sizing: border-box;
				border-radius: 10upx;
				background: #747C87;
				margin-right: 30upx;
				&.active{
					background:linear-gradient(to left,#19B6F7,#1067D1);
				}
			}
			.scroll-term_H {
				white-space: nowrap;
				width: 100%;
				box-sizing: border-box;
				.fund-term-item-title{
					color: #FFFFFF;
					font-size: 26upx;
					font-weight: bold;
					margin-bottom: 34upx;
				}
				text{
					display: block;
					color: #FFFFFF;
					font-size:26upx;
				}
			}
		}
		.pool-input-item{
			background-color: #ececec;
			border-radius: 10upx;
			line-height: 80upx;
			height: 80upx;
			padding-left: 22upx;
			input{
				line-height: 80upx;
				height: 80upx;
			}
		}
		.pool-btn-item{
			background-color: #1D7DFF;
			color: #FFFFFF;
			text-align: center;
			line-height: 80upx;
			border-radius:10upx;
			width: 400upx;
			margin: 100upx auto 50upx;
		}
	}
</style>
